<!-- 添加设备 -->
<template>
    <div id="dialog-container">
        <el-button type="primary" size="small" plain @click="dialogVisible = true">添加设备</el-button>
        <el-dialog v-dialogDrag :title="'检测设备'" append-to-body width="710px" :before-close="handleClose" :visible.sync="dialogVisible" :close-on-click-modal="false">
            <el-form :model="form" :inline="true" size="small" label-width="90px">
                <el-form-item label="设备编号：">
                    <el-input v-model="form.code"></el-input>
                </el-form-item>
                <el-form-item label="设备名称：">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-button type="primary" plain size="small" @click="showList">查询</el-button>
            </el-form>
            <div style="float: left;padding-left: 20px;font-size: 15px;color: #666;padding-top: 6px;">
                 共 <span style="color: red;">{{pageTotal}}</span> 条数据
            </div>
            <el-table :data="tableData" ref="multipleTable" size="small" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
                <el-table-column prop="code" align="center" label="设备编号" min-width="100"></el-table-column>
                <el-table-column prop="name" align="center" label="设备名称" min-width="100"></el-table-column>
            </el-table>
            <el-row type="flex" justify="center">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizeArr"
                :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"></el-pagination>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="choose">确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        getDviceList
    } from 'service/task';
    export default {
        data() {
            return {
                dialogVisible: false,
                form: {
                    code: '',
                    name: ''
                },
                tableData: [],
                deviceData: [],
                deviceDataList: [],
                loading: false,
                deviceCodeList: [],
                selectedDeviceList: [],
                currentPage: 1,
                pageSizeArr: [10, 20, 50, 100],
                pageSize: 10,
                pageTotal: 10
            };
        },
        props: {
            show: {
                type: Boolean,
                default: false
            },
            rowCount: {
                type: Object
            }
        },
        beforeMount() {
            this.showList();
        },
        updated() {
            if (this.rowCount.id && this.$refs.multipleTable) {
                this.$refs.multipleTable.clearSelection();
                if (this.rowCount.deviceCode) {
                    if (this.rowCount.deviceCode.indexOf(",") != -1) {
                        this.deviceCodeList = this.rowCount.deviceCode.split(",");
                        for (var i = 0; i < this.deviceCodeList.length; i++) {
                            for (var j = 0; j < this.tableData.length; j++) {
                                if (this.deviceCodeList[i] == this.tableData[j].code) {
                                    this.$refs.multipleTable.toggleRowSelection(this.tableData[j], true);
                                }
                            }
                        }
                    } else {
                        this.deviceCodeList = [this.rowCount.deviceCode];
                        for (var i = 0; i < this.deviceCodeList.length; i++) {
                            for (var j = 0; j < this.tableData.length; j++) {
                                if (this.deviceCodeList[i] == this.tableData[j].code) {
                                    this.$refs.multipleTable.toggleRowSelection(this.tableData[j], true);
                                }
                            }
                        }
                    }
                }
            }
        },
        methods: {
            handleClose() {
                this.form.code = '';
                this.form.name = '';
                if (this.$refs.multipleTable) {
                    this.$refs.multipleTable.clearSelection();
                }
                this.dialogVisible = false;
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.showList();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.showList();
            },
            showList() {
                let params = {
                    code: this.form.code,
                    name: this.form.name,
                    pageNumber: this.currentPage,
                    pageSize: this.pageSize,
                    status: 1,
                    sort: '',
                    order: '',
                };
                this.loading = true;
                getDviceList(params)
                    // this.axios.get('/system/deviceList', params)
                    .then(res => {
                        this.tableData = res.data.result.content;
                        //this.currentPage = res.data.result.pageable.pageNumber;
                        this.pageSize = res.data.result.pageable.pageSize;
                        this.pageTotal = res.data.result.totalElements;
                        this.loading = false;
                    });
            },
            handleSelectionChange(val) {
                this.deviceData = [];
                for (var i = 0; i < val.length; i++) {
                    this.deviceData.push(val[i].code);
                };
                this.deviceData = this.deviceData.filter(function(element, index, self) {
                    return self.indexOf(element) === index;
                });
                this.deviceDataList = val;
            },
            choose() {
                this.$emit('updateDevice', this.rowCount, this.deviceData.join(","), this.deviceDataList);
                this.deviceData.splice(0, this.deviceData.length);
                this.deviceDataList.splice(0, this.deviceDataList.length);
                if (this.$refs.multipleTable) {
                    this.$refs.multipleTable.clearSelection();
                }
                this.dialogVisible = false;
            }
        }
    }

</script>
